<template>
	<view v-if="data" class="content">
		<view class="way">
			<view class="type">
				<text class="type-item">到店自取</text>
				<!-- <text class="type-item">外卖配送</text> -->
			</view>
			<GoShop :data="data" />
		</view>

		<view class="good-list">
			<view class="goods-detail" v-for="(item, i) in data.orderSubmitCartVos" :key="i">
				<view class="con">
					<view class="con-wrap">
						<image
							lazy-load mode="aspectFill"
							class="img"  :src="item.imgUrl"
						></image>
						<view class="info">
							<view class="title">
								{{ item.productName }}
								<view class="desc">{{ item.spuNames }}</view>
							</view>
							<view class="num-wrap">
								<text class="price">￥{{ item.skuPrice }}</text>

								<text class="num">x{{item.productQuantity}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="data.reducePrice > 0" class="discount">
				店铺优惠
				<view class="price-dis">
					<text class="price">￥{{ data.reducePrice }}</text>
					{{ data.checkCardName }}
				</view>
			</view>
		</view>

		<view class="select-bottom">
			<view class="price-wrap">
				已选{{ data.sumProductCount }}件
			</view>
			<view class="all">
				<text>合计: {{ data.sumProductCount }}</text>
			</view>
			<button
				type="primary"
				class="sub-btn" size="mini"
				@click="submit"
			>
				去支付
			</button>
		</view>
	</view>
</template>

<script>
import GoShop from './components/goShop.vue'

export default {
	components: {
		GoShop
	},
	data() {
		return {
			list: [1, 2, 3, 4],
			data: null
		}
	},
	mounted() {
		console.log(this.$store)
	},
	onShow() {
		this.getData();
	},
	methods: {
		/**
		 * 获取详情数据
		 */
		getData() {
			this.$http.post('/order/getSubmitOrderVo', {}).then(res => {
				console.log(res)
				this.data = res.data;
			}).catch(e => {
				console.log(e)
			})
		},

		/**
		 * 支付逻辑
		 */
		bindPay: function(obj) {
            let self = this;
            console.log(obj)
			appId: "wx5416e90b5c6d83a6"
			nonceStr: "Gyj8ZtxwYe0zJcXko7roAkK54MzBMGI0"
			packageValue: "prepay_id=wx041437170188132113c0a51b471f170000"
			paySign: "QKu0+QRPA5DOy4KCaVq2Gc47z2TAFWMEliqarMqCRPQhGo21ITBmjNq6lpXUH8D/qRWKKO6rOi9BIzXACTGC9ggcFOzFi5u0Ka+wKAtnXMZAmrS3tXvBZPwHkNOXGRCgXzN8pON9FzPFzlzuFlN1t/GZ7eEDW7nBmeaD+YCRhI3ugbYYqTIrjnI94J5XMkCMABxrmuuNLmvevXYeJG10jjuqjPSgoqG2eTLHv32JAgddrrbnQIj/zpp8oIFwWTLAUznf26tVlGfwRdXKRsvNLN4hzr7EAHV3htFJWBOhhA0vp9Sgdv2oukt0XRrqPrrl0nZDrMN2oFkW4zDBFllwPQ=="
			signType: "RSA"
			timeStamp: "1675492636"
           	wx.requestPayment({
				'total_fee': obj.totalFee,
				'timeStamp': obj.timeStamp.toString(),
				'nonceStr': obj.nonceStr,
				'package': obj.packageValue,
				'signType': obj.signType,
				'paySign': obj.paySign,
				'success':function(res){
					console.log(res, 'res失败')
					if (res.errMsg === "requestPayment:ok") {
						uni.showToast({
							title: '下单成功',
							icon: 'success'
						})
						// setTimeout(() => {
						// 	self.$back();
						// }, 1000);
					}else{
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					}
				},
				'fail':function(res){
					console.log(res, 'res失败2')
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				},
				'complete':function(res){}
            })
        },
		/**
		 * 确认订单提交
		 */
		submit() {
			this.$http.post('/order/unifiedOrder', {
				receiveTime: Date.now(),
				sendType: 'help_yourself'
			}).then(res => {
				this.bindPay(res.data);
				console.log(res, 'res')
			}).catch(e => {
				console.log(e)
			})
		}
	}
}
</script>

<style lang="stylus" scoped>
.content
	padding-bottom 106rpx

.select-bottom
	position fixed
	bottom 0
	left 0
	width 100%
	height 106rpx
	background #fff
	display flex
	align-items center
	box-sizing border-box
	padding 0 30rpx

	.price-wrap
		display flex
		flex-direction column
		justify-content center

	.sub-btn
		margin-left auto
		margin-right 0

	.all
		margin-left 20rpx
		font-weight 500
		font-size 28rpx
		color #F52711

.way
	background #fff
	border-radius 8rpx
	margin 0 30rpx
	padding 32rpx

	.type
		font-size 36rpx
		display flex
		justify-content space-between
		margin-bottom 40rpx

		.type-item
			flex 1
			display flex
			justify-content center
			align-items center

.good-list
	background #fff
	margin 30rpx
	padding-bottom 40rpx

	.discount
		display flex
		align-items center
		margin 30rpx 40rpx 0

		.price-dis
			margin-left auto

			.price
				font-size 30rpx
				color #F52711

.goods-detail
	padding 40rpx 40rpx 0
	border-radius 8rpx
	background #fff

	.con
		display flex
		align-items center

		.con-wrap
			display flex
			flex 1

		.img
			height 180rpx
			width 180rpx
			margin-right 20rpx

		.info
			display flex
			flex-direction column
			justify-content space-between
			flex 1

			.desc
				color #999

		.num-wrap
			display flex
			justify-content space-between
			align-items center

			.price
				font-size 32rpx
				font-weight 500
				color #F52711

			.num
				margin-left auto
				font-size 30rpx
</style>
